<template>
  <div>
    <!-- 搜索框 -->
    <div class="business-search">
      <div>
        <van-icon
          name="arrow-left"
          size="24"
          color="#1D2129"
          @click="onClickLeft"
        />
      </div>
      <div class="search-container">
        <van-cell-group inset>
          <van-field
            v-model="input"
            center
            clearable
            left-icon="search"
            placeholder="企业名称/社会统一信用代码/商品名称"
          >
            <template #button>
              <van-button size="small" class="searchBtn" @click="search"
                >搜索</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
      </div>
    </div>
    <!-- 搜索历史 -->
    <div class="history-search">
      <!-- 标题 -->
      <div class="history_title">
        <div>历史搜索</div>
        <div>
          <img src="@/assets/images/trash.png" alt="清空" @click="deleteBtn" />
        </div>
      </div>
      <!-- 历史内容 -->
      <div class="history_content">
        <div class="history_content_info" v-for="item in history">
          {{ item.content }}
        </div>
        <div class="empty" v-if="history.length === 0">暂无历史记录</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
// 路由回退
const onClickLeft = () => router.back();

// 测试数据
const history = ref([
  {
    content: "款嫩嫩呢",
  },
  {
    content: "款嫩嫩",
  },
  {
    content: "款嫩",
  },
  {
    content: "款",
  },
]);

// 搜索输入框
const input = ref("");
// 搜索点击事件
const search = () => {
  if (input.value.trim()) {
    history.value.push({ content: input.value });
  }
};
// 删除历史记录
const deleteBtn = () => {
  history.value = [];
};
</script>

<style lang="scss" scoped>
.business-search {
  display: flex;
  align-items: flex-end;
  padding-top: 5px;
  padding-left: 9px;
  .search-container {
    .van-cell {
      background-color: #f2f3f5;
      width: 317px;
      height: 33px;
      border-radius: 15px;
      padding-right: 4px;
      .searchBtn {
        width: 54px;
        border-radius: 15px;
      }
    }
    .van-field {
      flex-wrap: nowrap;
    }
  }
}
.history-search {
  padding: 16px;
  .history_title {
    font-size: 14px;
    color: #1d2129;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  .history_content {
    display: flex;
    flex-wrap: wrap;
    &_info {
      height: 30px;
      background-color: #f2f3f5;
      padding: 4px 12px 4px 12px;
      border-radius: 30px;
      font-size: 13px;
      color: #4e5969;
      width: auto;
      text-align: center;
      line-height: 27px;
      margin-right: 8px;
      margin: 5px;
    }
    .empty {
      font-size: 14px;
      width: 100%;
      text-align: center;
    }
  }
}
</style>

